<template>
    <div class="second_level_page customer_detail_page">
        <div class="customer_detail_main">
            <div class="customer_img_name">
                <img :src="member.backImg"><br>
                {{this.member.address}}
            </div>
            <div class="customer_info">
                <div class="customer_text">
                    <span class="left">营业时间：</span>
                    <span class="left main">08:30-22:00</span>
                </div>
                <div class="customer_text customer_notice">
                    <span class="left">店铺公告：</span>
                    <span class="left main">双十一福利大放送，双十一福利大放送，双十一福利大放送，双十一福利大放送，双十一福利大放送，</span>
                    <div class="clear"></div>
                </div>
                <div class="customer_text">
                    <span class="left">店铺类型：</span>
                    <span class="left main">{{member.shopType}}</span>
                </div>
            </div>
            <div class="ditu">
              <baidu-map class="map" :center="{lng: this.lng, lat: this.lat}" :zoom="15" @ready="mapReady" :scroll-wheel-zoom="true">
                <bm-marker :position="{lng: this.lng, lat: this.lat}" :dragging="true">
                </bm-marker>
              </baidu-map>
            </div>
            <div class="btn color1">联系客户</div>
            <div class="btn color2">配送管理</div>
            <div class="btn color3">财务明细</div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
              member: {},
              map:'',
              BMap:'',
              lng: null,
              lat: null,
            }
        },
        created(){
          this.member = this.$route.query.member;
          const [lng, lat] = this.member.mapCode.split(",").map(parseFloat);
          this.lng = lng;
          this.lat = lat;
        },
        mounted(){
        },
        components: {
        },
        methods: {
          //地图默认方法
          mapReady({ BMap, map }) {
            this.BMap = BMap;
            this.map = map;
          }
        },
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .customer_detail_main{
        background: #fff;
    }
    .customer_img_name{
        margin-top: .14rem;
        @include wh(100%, 3.06rem);
        text-align: center;
        line-height: .36rem;
        @include sc(.36rem, #333);
        background: url(../../../images/addressBg.png) no-repeat bottom;
        background-size: 100% .08rem;
        background-color: #fff;
        img{
            @include wh(1.5rem, 1.5rem);
            margin-top: .46rem;
            border-radius: .75rem;
            margin-bottom: .26rem;
        }
    }
    .customer_info{
        padding: .04rem 0 .34rem;
        background: #fff;
        .customer_text{
            clear: both;
            @include wh(100%, .28rem);
            margin-top: .3rem;
            .left{
                display: block;
                @include sc(.28rem, #666);
                @include wh(1.4rem, .28rem);
            }
            .main{
                @include sc(.28rem, #333);
                @include wh(5.7rem, .28rem);
            }
        }
        .customer_notice{
            height: auto;
            .left{
                height: auto;
            }
            .main{
                height: auto;
            }
        }
    }
    .ditu{
        @include wh(100%, 4.5rem);
        text-align: center;
        line-height: 4.5rem;
        border: .01rem solid #ebebeb;
    }
    .btn{
        margin: .2rem .25rem;
        background: $blue;
        border: 0;
        border-radius: .08rem;
        @include wh(7rem, .88rem);
        @include sc(.3rem, #fff);
        text-align: center;
        line-height: .88rem;
    }
    .color1{
        margin-top: .3rem;
        background: #39a736;
    }
    .color2{
        background: #d22e3a;
    }
    .color3{
        background: #36b4be;
    }
    .map {
       margin: auto;
       width: 100%;
       height: 240px;
     }
</style>
